<!DOCTYPE html>
<html lang="zh">
<head>
	<th:block th:include="include :: header('webuploader文件上传')" />
	<th:block th:include="include :: webuploader-css" />
	 <style type="text/css">
    .uploader {
        border: 1px solid #ccc;
        height: 200px;
        margin: 15px;
    }
 
    .picker {
        display: inline-block;
        line-height: 1.428571429;
        vertical-align: middle;
        margin: 0 12px 0 0;
    }
 
    .picker .webuploader-pick {
        padding: 6px 12px;
        display: block;
    }
 
    .uploader-list{overflow:hidden;padding-top:10px;}
    .uploader-list>div {
        position:relative;
        float: left;
        margin-right: 15px;
    }
 
    span.state {
        margin-left: 15px;
    }
 
    .red {
        color: red;
    }
 
    .green {
        color: green;
    }
    .del{position:absolute;top:0;width:100%;color:red;height:0;overflow:hidden;background:rgba(0,0,0,0.5);text-align:center;}
    .del span{cursor: pointer;}
	</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>webuploader文件上传控件</h5>
                    </div>
                    <div class="ibox-content">
                    	<div class="form-group">
                            <label class="font-noraml">单图上传</label>
	                        <div class="info1">信息</div>
			                <div class="btn">
			                    <div id="picker" class="picker">选择文件</div>
			                </div>
            				<div id="thelist" class="uploader-list"></div>
            
                        </div>
                        
                        <div class="form-group">
                            <label class="font-noraml">多文件上传</label>
			                <div class="info2">信息</div>
			                <div class="btn">
			                    <div id="filePicker" class="picker">选择图片</div>
			                </div>
				            <div id="fileList" class="uploader-list"></div>
                        </div>
                        <hr>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: webuploader-js" />
    <script type="text/javascript">
    $(document).ready(function () {
    	//选择器ID 缩略图div 上传按钮 展示信息框 自动上传 文件数量
    	uploader("picker", "thelist", "ctlBtn","info1");
    	uploader("filePicker", "fileList", "ctlPicBtn","info2",true,5);
    });
    </script>
</body>
</html>
